<!--
 * @description  : poi信息-分类选择
 * @descriptionDetail: poi信息-日计划制定
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-26 09:43:02
-->
<template>
  <view class="page"> 
    <theme-navbar
      :is-white="false"
      :isBack="false"
      backColor="#2b85e4"
      title="选择分类"
    >
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item
              :title="item.txt" 
              v-if="item.children"
              @tap="handlerItem(item)"
            >
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.txt" v-else @tap="handlerSelect(item)">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                v-if="selectIds.includes(item.val)"
                slot="right-icon"
              ></u-icon>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script> 
import zjCommonService from "@/service/common/common.service";
/** 
 * 坐标分类类型选择
 * 可以限制单选、多选
 */
export default {
  name: "TypeTree",
  props: {
    // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER).user,
      orgs: [],   // 所有部门数据
      tabList: [],  // 页头滚动内容
      current: 0,
      orgItems: [],  // 点击选中的下级部门
      selectItems: [],  // 选中的部门
      selectIds: [],    // 选中的id
    };
  }, 
  onLoad() {
		
  },
  created() {
    // 查询分类数据数据
    zjCommonService.gisTypeTree().then(dr => {
      if (dr.success) {
        this.treeData = dr.data;
        this.tabList = [{name: "全部", val: 'root',},];
        this.orgItems = dr.data;
      }
    });
  },
  methods: {
    // 切换头部导航选中项
    change(index) {
      this.current = index;
      if (index === 0) {
        this.orgItems = this.treeData;
      } else {
        this.orgItems = this.findItems(this.treeData, this.tabList[index].val);
      }
      this.tabList = this.tabList.slice(0, index + 1);
    },
    // 查找指定项
    findItems(arr, val) {
      if (arr == null) {
        return null;
      }
      for (let obj of arr) {
        if (obj.val == val) {
          return obj.children;
        }
        find(obj.children, val);
      }
      return null;
    },
    // 点击选中项
    handlerItem(orgItem){
      if (orgItem.val == 'root') {
        this.orgItems = this.treeData;
        return;
      }
      orgItem.name = orgItem.txt;
      this.tabList.push(orgItem);
      this.current = this.tabList.length - 1;
      this.orgItems = orgItem.children;
    },
    // 点击根节点
    handlerSelect(orgItem) {
      if (this.isSingle) {  // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(orgItem);
        this.selectIds.push(orgItem.val);
      } else {  // 多选
        let sItems = this.selectItems.filter(s => s.val == orgItem.val);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter(s => s.val != orgItem.val);
          this.selectIds = this.selectIds.filter(i => i != orgItem.val);
        } else {
          this.selectItems.push(orgItem);
          this.selectIds.push(orgItem.val);
        }
      }
    },
    // 点击确定
    onSure() {
      this.$emit("choose", this.selectItems);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-list {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  z-index: 999;
}
#orgListContainer {
  margin-top: 45px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #FFF;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>